<template>
  <div>
    <h2>当前求和为：{{sum}}</h2>
    <h3>放大10倍后的值是：{{bigSum}}</h3>
    <h3>我在{{school}}学习{{subject}}</h3>
    <div>
      <select v-model="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前求和为奇数再加</button>
      <button @click="incrementWait(n)">等一等再加</button>
    </div>
  </div>
</template>

<script>
  import {mapState,mapGetters, mapMutations, mapActions} from 'vuex'
  export default {
    name:'Count',
    data() {
      return {
        n: 1// 用户当前选择的值
      }
    },
    methods:{
      /*increment(){
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      },
      incrementOdd(){
        this.$store.dispatch('jiaOdd',this.n)
      },
      incrementWait(){
        this.$store.dispatch('jiaWait',this.n)
      }*/

      // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
      ...mapMutations({increment:'JIA', decrement:'JIAN'}),

      // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
      ...mapActions({incrementOdd:'jiaOdd', incrementWait: 'jiaWait'})
    },
    computed:{
      // 靠程序员自己写计算属性
      /*sum(){
        return this.$store.state.sum
      },
      school(){
        return this.$store.state.school
      },
      subject(){
        return this.$store.state.subject
      },
      bigSum(){
        return this.$store.getters.bigSum
      }*/

      // 借助mapState生成计算属性，从state中获取数据。（对象写法）
      /*...mapState({sum:'sum',school:'school',subject:'subject'})*/
      // 借助mapState生成计算属性，从state中获取数据。（数组写法）
      ...mapState(['sum', 'school', 'subject']),

      /**********************************************************/
      // 借助mapGetters生成计算属性，从getters中获取数据（对象写法）
      /*...mapGetters({bigSum:'bigSum'})*/
      // 借助mapGetters生成计算属性，从getters中获取数据（数组写法）
      ...mapGetters(['bigSum'])
    }
  }
</script>

<style>
  button {
    margin-left: 10px;
  }
</style>